<template>
  <MainLayout>
    <template #sidebar>
      <Sidebar />
    </template>

    <template #topbar>
      <Topbar />
    </template>

    <router-view v-slot="{ Component }">
      <div class="page-wrapper">
        <component :is="Component" />
      </div>
    </router-view>
  </MainLayout>
</template>
  
  <script setup>
import { onMounted } from "vue";
import { RouterView } from "vue-router";
import Sidebar from "@/layouts/Sidebar.vue";
import Topbar from "@/layouts/Topbar.vue";
import MainLayout from "@/layouts/MainLayout.vue";
import { useAppStore } from "@/stores/app";

const appStore = useAppStore();

onMounted(() => {
  const dark = localStorage.getItem("darkMode");
  if (!dark || dark.length < 4) {
    localStorage.setItem("darkMode", "false");
  }
});
</script>
  
  <style lang="less" scoped>
.page-wrapper {
  min-height: calc(
    100vh - 70px - 25px - 25px;
  ); /* 100vh - 顶部栏 - 主内容上下内边距 */
  position: relative;
}
</style>